<template>
    <div>
        <!--    搜索表单-->
        <div style="margin-bottom: 20px;margin-top:-10px">
            <span style="float:left;margin-top:24px;font-size: large">患者信息:</span>
            <el-tag style="float:left;margin-top:12px;  width: 80px;" type="success;">挂号id:{{ RegisterForm.id }}</el-tag>
            <el-tag style="float:left;margin-top:12px;  width: 80px;" type="success;">姓名:{{ RegisterForm.realName
            }}</el-tag>
            <el-tag style="float:left;margin-top:12px;width: 110px;" type="success;">病历号:{{ RegisterForm.caseNumber
            }}</el-tag>
            <el-tag style="float:left;margin-top:12px;">年龄{{ RegisterForm.age }}</el-tag>
            <el-tag style="float:left;margin-top:12px;">性别{{ RegisterForm.gender }}</el-tag>
            <br><br>
        </div>
        <div style="margin-bottom: 20px">
            <el-divider></el-divider>
            <div style="float: left;margin-top: -10px">
                <i style="font-size: x-large" class="el-icon-document-checked"></i><span
                    style="margin-left:10px;font-weight:bold;font-size:x-large">病历首页</span>
            </div>
            <br>
        </div>
        <el-divider></el-divider>
        <br>
        <div class="Infocheck">
            <span
                style="float:left;margin-left:10px;height:5px;margin-top:-23px;font-size:medium;font-weight: bold">病案首页</span>
            <el-form>
                <el-form-item style="margin-top:10px;height:5px;margin-left:8px;float: left" label="主诉">
                    <el-input v-model="MedicalRecord.readme"
                        style="height:5px;float:left;margin-top:-45px;margin-left:86px;width: 1210px" type="textarea"
                        placeholder="请输入主诉"></el-input>
                </el-form-item>
            </el-form>

            <el-form>
                <el-form-item style="margin-top:20px;height:5px;margin-left:8px;float: left" label="现病史">
                    <el-input v-model="MedicalRecord.present"
                        style="height:2px;float:left;margin-top:-40px;margin-left:86px;width: 1210px" type="textarea"
                        placeholder="请输入现病史"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="margin-top:20px;height:5px;margin-left:8px;float: left" label="现病治疗情况">
                    <el-input v-model="MedicalRecord.presentTreat"
                        style="height:2px;float:left;margin-top:-40px;margin-left:86px;width: 1210px" type="textarea"
                        placeholder="请输入现病治疗情况"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="margin-top:20px;height:5px;margin-left:8px;float: left" label="既往史">
                    <el-input v-model="MedicalRecord.history"
                        style="height:2px;float:left;margin-top:-40px;margin-left:86px;width: 1210px" type="textarea"
                        placeholder="请输入既往史"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="margin-top:20px;height:5px;margin-left:10px;float: left" label="过敏史">
                    <el-input v-model="MedicalRecord.allergy"
                        style="height:2px;float:left;margin-top:-40px;margin-left:84px;width: 1210px" type="textarea"
                        placeholder="请输入过敏史"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="margin-top:20px;height:5px;margin-left:10px;float: left" label="体格检查">
                    <el-input v-model="MedicalRecord.physique"
                        style="height:2px;float:left;margin-top:-40px;margin-left:84px;width: 1210px" type="textarea"
                        placeholder="请输入体格检查信息"></el-input>
                </el-form-item>
            </el-form>

            <div>
                <el-table :data="ConfirmDiseaseTable" tooltip-effect="dark"
                    style="margin-top:28px;margin-left:95.2px;float: left;width: 87%">
                    <el-table-column prop="diseaseCode" label="疾病助记编码" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="diseaseName" label="疾病名称" width="120">
                    </el-table-column>
                    <el-table-column prop="diseaseICD" label="国际ICD编码" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="diseaseCategory" label="疾病所属分类" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="primary" style="margin-right: 14px" :plain="true"
                                @click.native.prevent="deleteRow(scope.$index, ConfirmDiseaseTable)">移除</el-button>
                            <!-- 增加记录 -->
                            <el-button type="primary" :plain="true" @click="add(scope.$index, scope.row)">确认</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-popover placement="right" width="989" trigger="click">
                    <div>
                        <el-input v-model="inputDiseaseCode" style="width: 270px;float: left;" placeholder="请输入疾病助记编码"
                            clearable></el-input>
                        <el-input v-model="inputDiseaseName" style="width: 270px; margin-left: 20px;float: left;"
                            placeholder="请输入疾病名称" clearable></el-input>
                        <el-input v-model="inputDiseaseCategory" style="width: 270px; margin-left: 20px;float: left;"
                            placeholder="请输入疾病所属分类" clearable></el-input>
                        <!-- <el-select v-model="value1" placeholder="请选择疾病所属分类">
                                    <el-option v-for="item in options1" :key="item.value" :label="item.label"
                                        :value="item.value">
                                    </el-option>
                                </el-select> -->
                        <el-button style="float:right;margin-top:0px;width:100px;margin-left:20px;" icon="el-icon-search"
                            type="primary" @click="selectByCondition">搜索</el-button>

                        <span
                            style="float:left;margin-top:23px;font-size: larger;font-weight: bold">疾病信息表</span>
                    </div>
                    <br> <br>
                    <el-table :data="DiseaseTable" style="width: 100%" height="250">
                        <el-table-column label="ID" prop="id" fixed>
                        </el-table-column>
                        <el-table-column label="疾病助记编码" prop="diseaseCode">
                        </el-table-column>
                        <el-table-column label="疾病名称" prop="diseaseName">
                        </el-table-column>
                        <el-table-column label="国际ICD编码" prop="diseaseICD">
                        </el-table-column>
                        <el-table-column label="疾病所属分类" prop="diseaseCategory">
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <!-- 请确认的这一行显示到外层表格中 -->
                                <el-button type="primary" @click="handleRowClick(scope.row)">选中</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 增加就不要全部加载疾病信息了，内容特多，加载特慢 -->
                    <el-button slot="reference">增加</el-button>
                </el-popover>
            </div>
            <el-form>
                <el-form-item style="margin-top:2px;height:5px;margin-left:5px;float: left" label="检查/检验建议">
                    <el-input v-model="MedicalRecord.proposal"
                        style="height:5px;float:left;margin-top:-45px;margin-left:89px;width: 1210px" type="textarea"
                        placeholder="请输入检查/检验建议"></el-input>
                </el-form-item>
            </el-form>
            <el-form>
                <el-form-item style="margin-top:10px;height:5px;margin-left:10px;float: left" label="注意事项">
                    <el-input v-model="MedicalRecord.careful"
                        style="height:5px;float:left;margin-top:-37px;margin-left:84px;width: 1210px" type="textarea"
                        placeholder="请输入注意事项"></el-input>
                </el-form-item>
            </el-form>

        </div>

        <br>
        <el-button style="float:left;margin-top:70px;margin-left:-1201px" type="primary" @click="update">保存</el-button>
        <el-button style="float:left;margin-top:70px;margin-left:-1109px" type="primary" @click="resetForm">清空</el-button>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    mounted() {
        //从创建病历按钮中的界面获取挂号id和病历id
        this.RegisterForm.id = this.$route.params.registerId;//挂号id
        this.MedicalRecordDisease.medicalRecordId = this.$route.params.medicalRecordId//病历id
        console.log("挂号id:  " + this.RegisterForm.id)
        console.log("病历id:  " + this.MedicalRecordDisease.medicalRecordId)
        //将该患者的挂号id储存到session中，同名的应该会覆盖掉，所以不用清除
        sessionStorage.setItem('registerId', this.RegisterForm.id)
        //初始化患者信息
        this.init()
    },
    data() {
        return {
            RegisterForm: {//储存患者信息
                id: '',//挂号id
                realName: '',
                caseNumber: '',
                age: '',
                gender: ''
            },
            MedicalRecordDisease: {//疾病记录
                medicalRecordId: '',//病历id
                diseaseId: ''//疾病id
            },
            MedicalRecord: {
                readme: '',
                present: '',
                presentTreat: '',
                history: '',
                allergy: '',
                physique: '',
                proposal: '',
                careful: ''
            },
            DiseaseTable: [],//搜索的疾病信息
            inputDiseaseCode: '',
            inputDiseaseName: '',
            inputDiseaseCategory: '',
            ConfirmDiseaseTable: [],//确认的疾病记录
            selectedRow: null
        }
    },
    methods: {
        //选中这一行
        handleRowClick(row) {
            this.ConfirmDiseaseTable.push(row); // 将选中的行数据添加到外部表格数据中
        },
        //重置
        resetForm() {
            //定义为：,修改为=
            this.MedicalRecord = {
                readme: undefined,
                present: undefined,
                presentTreat: undefined,
                history: undefined,
                allergy: undefined,
                physique: undefined,
                proposal: undefined,
                careful: undefined
            }
        },

        //点击确认后，增加记录
        //参数：MedicalRecordDisease medicalRecordDisease:  medicalRecordId:病历id  和   diseaseId:疾病id
        async add(index, row) {
            await axios.get("http://127.0.0.1:8088/medicalrecorddisease/insert", { params: { medicalRecordId: this.MedicalRecordDisease.medicalRecordId, diseaseId: row.id } }).then((res) => {
                console.log(res.data.data)
                this.$message({
                    message: '疾病记录成功',
                    type: 'success'
                });
            });
        },

        //拿到挂号id后去搜索对应患者信息，展示在前端上
        async init() {
            //初始化患者信息
            await axios.get("http://127.0.0.1:8088/register/selectById", { params: { id: this.RegisterForm.id } }).then((res) => {
                console.log(res.data.data)
                //绑定数据
                this.RegisterForm.realName = res.data.data.realName
                this.RegisterForm.caseNumber = res.data.data.caseNumber
                this.RegisterForm.age = res.data.data.age
                this.RegisterForm.gender = res.data.data.gender
                this.$message({
                    message: '患者信息初始化成功',
                    type: 'success'
                });
            });
        },

        //动态修改病历
        async update() {
            await axios.get("http://127.0.0.1:8088/medicalRecord/update",
                {
                    params: {
                        id: this.MedicalRecordDisease.medicalRecordId,
                        readme: this.MedicalRecord.readme,
                        present: this.MedicalRecord.present,
                        presentTreat: this.MedicalRecord.presentTreat,
                        history: this.MedicalRecord.history,
                        allergy: this.MedicalRecord.allergy,
                        physique: this.MedicalRecord.physique,
                        proposal: this.MedicalRecord.proposal,
                        careful: this.MedicalRecord.careful
                    }
                }).then((res) => {
                    console.log(this.MedicalRecordDisease.medicalRecordId)
                    console.log(res.data.data)
                    this.$message({
                        message: '患者病历保存成功',
                        type: 'success'
                    });
                });
        },
        deleteRow(index, rows) {
            rows.splice(index, 1);
        },

        //模糊查询疾病信息
        //参数：DiseaseCondition diseaseCondition:diseaseCode: this.inputDiseaseCode, diseaseName:this.inputDiseaseName,diseaseCategory:this.inputDiseaseCategory
        async selectByCondition() {
            await axios.get("http://127.0.0.1:8088/disease/selectByCondition", { params: { diseaseCode: this.inputDiseaseCode, diseaseName: this.inputDiseaseName, diseaseCategory: this.inputDiseaseCategory } }).then((res) => {
                console.log(res.data.data)
                //绑定数据
                this.DiseaseTable = res.data.data
                this.$message({
                    message: '查询成功',
                    type: 'success'
                });
            });
        }
    }
}
</script>
<style scoped></style>